<template>
	<div class="content-limit">
		<van-notice-bar left-icon="volume-o" :scrollable="false">
		  <van-swipe
		    vertical
		    class="notice-swipe"
		    :autoplay="3000"
		    :show-indicators="false"
		  >
		    <van-swipe-item v-for="(item,index) in announcementData" v-html="item.content"></van-swipe-item>
		  </van-swipe>
		</van-notice-bar>
		<van-pull-refresh @refresh="onRefresh" class="product_list_border_content_limit" success-text="刷新成功"
			 v-model="isLoading">
			
			<span class="project-title" v-if="hotProductListData != 'empty'">必过其一</span>
			<ul class="hot-product" v-if="hotProductListData != 'empty'">
				<li v-for="(item, index) in hotProductListData">
					<div class="product-logo-content-border-limit">
						<van-image :src="item.icon" class="product-logo-content-limit" width="40px">
						</van-image>
					</div>
					<div class="product-message-content-limit">
						<span class="title" style="font-weight: 500;" v-html="item.title"></span>
						<span class="describe" style="font-size: 12px;height: 20px;line-height: 20px;"
							v-html="'最高额度:' + item.max_price"></span>
					</div>
				</li>
			</ul>
			<span class="project-title" v-if="productListData != 'empty'">热门推荐</span>
			<ul class="product-list" v-if="productListData != 'empty'">
				<li v-for="(item, index) in productListData">
					<div>
						<div class="product-logo-content-border-limit">
							<van-image :src="item.icon" class="product-logo-content-limit" width="40px">
							</van-image>
						</div>
						<div class="product-message-content-limit">
							<div id="">
								<span class="title" v-html="item.title"></span>
								<span v-for="(val, key) in item.label" class="label" v-html="val"></span>
							</div>
							<span class="describe" v-html="item.desc">
							</span>
						</div>
						<div class="product-click-content-limit">
							<!-- <span class="count" v-html="item.apple_count +'人申请'"></span> -->
							<van-button @click="yjnq(item.id,item.title,1,item.url)" round="" size="small" type="info">
								立即领钱
							</van-button>
						</div>
					</div>
					<ul>
						<li>
							<span v-html="item.min_price + '~' + item.max_price"></span>
							<span>额度（元）</span>
						</li>
						<li>
							<span v-html="item.apple_count + '人申请'"></span>
							<span>成功下款</span>
						</li>
						<li>
							<span v-html="item.success_rate + '%'"></span>
							<span>通过率</span>
						</li>
					</ul>
				</li>
			</ul>
		</van-pull-refresh>
		<van-empty class="custom-image" image="../../../../static/images/index/index/product_empty.png"
			v-if="productListData == 'empty'">
		</van-empty>
		<van-tabbar v-model="active" class="oneBottomMenu">
			<van-tabbar-item>
				<span>贷款</span>
				<template #icon="props">
				    <img :src="props.active ? icon.active : icon.inactive" />
				</template>
			</van-tabbar-item>
			<van-tabbar-item icon="setting-o" @click="showList">无视征信</van-tabbar-item>
		</van-tabbar>
	</div>
</template>
<script>
	import Vue from 'vue';
	import Crypt from '@/aes.js';
	import 'vant/lib/index.css'
	import {
		Image as VanImage,
		Toast,
		Swipe,
		SwipeItem,
		Lazyload,
		Tabbar,
		TabbarItem,
		PullRefresh,
		Empty,
		NoticeBar
	} from 'vant';
	Vue.use(NoticeBar);
	Vue.use(VanImage);
	Vue.use(Toast);
	Vue.use(Swipe);
	Vue.use(SwipeItem);
	Vue.use(Lazyload);
	Vue.use(Tabbar);
	Vue.use(TabbarItem);
	Vue.use(PullRefresh);
	Vue.use(Empty);
	export default {
		data() {
			return {
				announcementData: [],
				productListData: 'empty',
				hotProductListData: 'empty',
				count: 0,
				active: 0,
				isLoading: false,
				deviceType: 1,
				icon: {
				    active: 'https://img01.yzcdn.cn/vant/user-active.png',
				    inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
				},
			}
		},
		mounted() {
			this.set_device();
			this.getAnnouncementData();
			this.getHotProductData();
			this.getProductData();
		},
		methods: {
			getAnnouncementData() {
				var _this = this;
				Toast.loading({
					duration: 0,
					message: '公告数据获取中...',
				});
				_this.$axios.post('/notice.list?platform=3', {
						main_channel: 1,
						t: _this.$get_time(),
						app_version: '1.0',
					})
					.then((res) => {
						//手动关闭上面的Loading
						Toast.clear();
						if (res.code == 0) {
							_this.announcementData = res.data;
						}
					})
			},
			//判断设备
			set_device: function() {
				var u = navigator.userAgent,
					app = navigator.appVersion;
				var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
				var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
				if (isIOS) {
					this.deviceType = 2;
				}
			},
			getHotProductData() {
				var _this = this;
				Toast.loading({
					duration: 0,
					message: '产品数据获取中...',
				});
				var userId = localStorage.getItem('userId');
				_this.$axios.post('/advert.rand?platform=3', {
						main_channel: 1,
						t: _this.$get_time(),
						app_version: '1.0',
					})
					.then((res) => {
						//手动关闭上面的Loading
						Toast.clear();
						if (res.code == 200) {
							if (JSON.stringify(res.data) == '[]') {
								_this.hotProductListData = 'empty';
							} else {
								_this.hotProductListData = res.data;
							}
						}
					})
			},
			getProductData() {
				var _this = this;
				Toast.loading({
					duration: 0,
					message: '产品数据获取中...',
				});
				var userId = localStorage.getItem('userId');
				_this.$axios.post('/advert.list?platform=3', {
						main_channel: 1,
						t: _this.$get_time(),
						app_version: '1.0',
						type: 1,
					})
					.then((res) => {

						//手动关闭上面的Loading
						Toast.clear();
						if (res.code == 200) {
							if (JSON.stringify(res.data) == '[]') {
								_this.productListData = 'empty';
							} else {
								_this.productListData = res.data;
							}
						}
					})
			},
			onRefresh() {
				setTimeout(() => {
					Toast('刷新成功');
					this.isLoading = false;
					this.count++;
				}, 1000);
			},
			showList() {
				window.location.href = '/#/user';
			},
			yjnq(id, title, type, url) {
				var _this = this,
					userId = localStorage.getItem('userId');
				var parameters = {
					id: id,
					user_id: userId,
					type: type,
					deviceType: _this.deviceType,
					title: title,
					url: url
				};

				window.location.href = '/#/info?type=2&parameters=' + Crypt.enc(JSON.stringify(parameters));
			}
		}
	}
</script>
<style type="text/css">
	html,
	body,
	#app,
	.content-limit {
		height: 100%;
	}

	.hot-product {
		background: #fff;
		width: 95%;
		margin: 0 auto;
		border-radius: 10px;
		text-align: left;
	}

	.hot-product>li {
		margin: 5px;
		height: 40px;
		border: 1px solid #eee;
		display: inline-flex;
		border-radius: 10px;
		padding: 5px;
		line-height: 40px;
	}

	.van-notice-bar {
		background-color: #FFFFFF;
		padding: 0 5px;
	}

	.content-limit {
		background-color: #f9f9f9;
	}

	.project-title {
		color: #333333;
		border-left: 3px solid #f76f35;
		padding-left: 10px;
		font-size: 14px;
		display: block;
		text-align: left;
		margin: 10px;
	}

	.notice-swipe {
		height: 40px;
		line-height: 40px;
	}

	.notice-swipe .van-swipe-item {
		text-align: left;
		padding-left: 10px;
	}

	.product_list_border_content_limit {
		margin-bottom: 50px;
	}

	.product-list {
		background-color: #f9f9f9;
	}

	.product-list>li {
		background-color: #fff;
		margin-bottom: 10px;
		padding: 12px 20px;
	}
	.product-list>li:last-child{
		border-bottom: 50px solid #f9f9f9;
	}

	.product-list>li>div {

		display: flex;
		line-height: 40px;
	}

	.product-list>li>ul {
		display: flex;
		justify-content: space-between;
		margin-top: 15px;
	}

	.product-list>li>ul>li {
		font-size: 14px;
		display: flex;
		flex-direction: column;
		text-align: center;
		width: 33%;
	}

	.product-list>li>ul>li>span:first-child {
		border-right: 1px solid #eee;
	}

	.product-list>li>ul>li:last-child>span:first-child {
		border-right: none;
	}

	.product-list>li>ul>li:first-child>span:first-child,
	.product-list>li>ul>li:last-child>span:first-child {
		color: #f76f35;
		font-weight: bold;
	}

	.product-list>li>ul>li>span:last-child {
		color: #8e8e8e;
		font-size: 12px;
		padding-top: 5px;
	}

	.product-list>li:first-child {
		margin-top: 0;
	}

	.product-logo-content-limit {
		border-radius: 5px;
		overflow: hidden;
		margin-right: 10px;
	}

	.product-message-content-limit {
		padding-left: 12px 20px;
		display: grid;
		width: 70%;
		height: 40px;
	}

	.product-message-content-limit>div {
		display: flex;
	}

	.product-message-content-limit .title {
		font-size: 14px;
		display: block;
		text-align: left;
		height: 20px;
		line-height: 20px;
		margin-right: 10px;
	}

	.product-message-content-limit .label {
		font-size: 12px;
		color: #f76f35;
		border: 1px solid #f76f35;
		border-radius: 10px;
		padding: 0px 8px;
		line-height: 16px;
		height: 16px;
		position: relative;
		top: 50%;
		transform: translateY(-50%);
	}

	.product-message-content-limit>.describe {
		font-size: 14px;
		display: block;
		text-align: left;
		width: 100%;
		color: #bbbbbb;
		height: 20px;
		line-height: 20px;
	}

	.product-message-content-limit>.money {
		font-size: 15px;
		display: block;
		text-align: left;
		color: #4283ec;
		font-weight: bold;
	}

	.product-click-content-limit {
		display: grid;
		text-align: right;
		width: 32%;
	}

	.product-click-content-limit>.van-button {
		position: relative;
		top: 50%;
		left: 50%;
		transform: translate(-20px, -50%);
		height: 20px;
		padding: 0;
		width: 70px;
		background-color: #f76f35;
		border-color: #f76f35;
	}

	.product-click-content-limit>.count {
		font-size: 12px;
		color: #bbbbbb;
	}

	.van-tabbar--fixed {
		position: fixed !important;
	}
</style>
